<template>
	<view>
		<view class="page-head">
			<view class="search_box flex-box flex-center">
				<image src="/static/icon/search.png" mode="aspectFill" class="search"></image>
				<input type="text" placeholder="请输入你要搜索的内容" v-model="q" confirm-type="search" @confirm="search" class="fs24" placeholder-class="cola">
			</view>
		</view>
		<view class="page-foot bg-white">
			<view class="foot-wrap flex-box flex-center m-hairline--top">
				<view class="foot-btn1 flex-grow-1" @click="addPopOpen">增加小区</view>
				<view class="foot-btn2 flex-grow-1" v-if="!fromType" @click="applyVillages()">确定申请</view>
			</view>
		</view>
		<view class="container">
			<view class="select-box">
				<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
					<view class="flex-box pt50 pb30 m-hairline--bottom" v-for="(item,index) in villageList">
						<view class="flex-grow-1">
							<view class="flex-box mb25">
								<view class="fs32 col10">{{item.name}}</view>
								<view class="red fs24 ml20" v-if="item.check_status == 0">审核中</view>
								<view class="red fs24 ml20" v-else-if="item.apply_status == 1">申请中</view>
							</view>
							<view class="fs24 col89">{{item.prov}}{{item.city}}{{item.region}}{{item.street}}{{item.addr}}</view>
						</view>
						<view v-if="fromType=='add_rental'" class="btn-remove ptb10 col-normal fs30" @click="chooseVillage(index)">选择</view>
						<image v-else @click="chooseVillage(index)" class="icon-check" :src="'/static/icon/icon_check'+(item.checked || item.apply_status == 1? '-on' : '')+'.png'" mode="aspectFit"></image>
						<!-- <image v-else class="icon-check" @click="chooseVillage(index)" src="/static/icon/icon_check.png" mode="aspectFit"></image> -->
					</view>
					<mescroll-empty v-if="villageList.length<=0"></mescroll-empty>
				</mescroll-body>
					
			</view>

			<!-- <view class="selected-box">
				<view class="title">已勾选小区</view>
				<view class="flex-box ptb20" >
					<view class="flex-grow-1">
						<view class="fs32 col10 mb25">曹杨花园小区</view>
						<view class="fs24 col89">上海市普陀区兰溪路886</view>
					</view>
					<image class="icon-check" src="/static/icon/icon_check-on.png" mode="aspectFit"></image>
				</view>
				<view class="flex-box ptb20">
					<view class="flex-grow-1">
						<view class="fs32 col10 mb25">曹杨花园小区</view>
						<view class="fs24 col89">上海市普陀区兰溪路886</view>
					</view>
					<image class="icon-check" src="/static/icon/icon_check.png" mode="aspectFit"></image>
				</view>
			</view> -->
		</view>
		<!--  -->
		<u-popup :show="addPopShow" mode="center" round="20" @close="addPopClose" @open="addPopOpen">
			<view class="add-pop">
				<view class="fs34 col10 tc mb15">添加小区</view>
				<view class="pt50 pb30 m-hairline--bottom">
					<view class="fs30 col89 mb25">小区名称</view>
					<input class="fs30 col10" v-model="formData.name" placeholder="请输入"></input>
				</view>

				<pick-regions :defaultRegion="defaultRegionCode" @getRegion="handleGetRegion">
					<view class="pt50 pb30 m-hairline--bottom">
						<view class="fs30 col89 mb25 m-arrow-right">省市区</view>
						<view class="fs30 col10" :class="regionName==''?'cola':''">
							{{regionName==''?'请选择':regionName}}
						</view>
					</view>
				</pick-regions>
				
				<picker mode="selector" :value="strIdx" :range="street" range-key="name" @change="strChange">
					<view class="pt50 pb30 m-hairline--bottom">
						<view class="fs30 col89 mb25">街道</view>
						<view class="flex-box">
							<view class="m-arrow-right fs30 col10 flex-grow-1">
								{{formData.street?formData.street : '请选择'}}
							</view>
						</view>
					</view>
				</picker>
				<view class="pt50 pb30 m-hairline--bottom">
					<view class="fs30 col89 mb25">详细地址</view>
					<input class="fs30 col10" v-model="formData.addr" placeholder="请输入"></input>
				</view>
				<view class="pt50 pb50">
					<view class="fs30 col89 mb25">小区图片</view>
					<view class="upload flex-box flex-wrap flex-align-start">
						<view class="item btn" @click="upload">
							<image class="icon" src="/static/icon/icon_upload1.png" mode="aspectFit"></image>
							<view class="fs24 cola tc">添加小区图片</view>
						</view>
						<view class="item" v-for="(item,index) in formData.images">
							<image class="img" :src="item" mode="aspectFill"></image>
							<image class="icon-clear" @click="delImg(index)" src="/static/icon/icon_clear.png"
								mode="aspectFit"></image>
						</view>
					</view>
				</view>
				<view class="plr35 flex-box flex-between">
					<view class="foot-btn1" @click="addPopClose()">取消</view>
					<view class="foot-btn2" @click="addVillage">确定提交</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import pickRegions from '@/components/pick-regions/pick-regions.vue';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	const core = require('@/xilu/core.js');
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			pickRegions
		},
		data() {
			return {
				addPopShow: false,
				type:'',
				fromType:'',
				regionArr: [],
				q:'',
				villageList: [],
				village_ids:'',
				formData:{
					name: '',
					prov: '',
					city: '',
					region:'',
					street:'',
					addr:'',
					images:[]
				},
				defaultRegion: [],
				defaultRegionCode: '11',
				region: [],
				street: [],
				strIdx: 0,
				
				downOption:{
					auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption:{
					auto:true, // 不自动加载
					// page: {
					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: '/static/images/none-data.png',
						tip: '暂无会员卡安排哦' 
					}
				},
			}
		},
		onLoad(options){
			this.village_ids = options.village_ids || '';
			this.type = options.type || '';
			this.fromType = options.fromType || '';
		},
		
		computed: {
			regionName() {
				// 转为字符串
				return this.region.map(item => item.name).join(' ')
			}
		},
		
		methods: {
			addPopOpen() {
				this.addPopShow = true
			},
			addPopClose() {
				this.addPopShow = false
			},
			regionChange(e) {
				this.regionArr = e.detail.value
				console.log(e);
			},
			search(){
				this.mescroll.resetUpScroll();
			},
			
			downCallback(){
				this.mescroll.resetUpScroll();
			},
			upCallback(page){
				let that = this;
				let village_ids = this.village_ids;
				let now_city = uni.getStorageSync('now_city') || '上海市';
				let q = this.q;
				let postData = {
				    page: page.num, // 页码, 默认从1开始
				    pagesize: page.size, // 每页数据条数
					city: now_city,
					village_ids:village_ids,
					q:q
					
				};
				//联网加载数据
				core.get({url:'/api/xiluhouse.common/villages',data:postData,success:(ret)=>{
					 if(page.num == 1) that.villageList = []; //如果是第一页需手动制空列表
					 that.villageList = that.villageList.concat(ret.data.data); //追加新数据
					 //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					 that.mescroll.endSuccess(ret.data.data.length);
				},loading:false});
			},
			chooseVillage(index){
				let villageList = this.villageList;
				
				if(this.fromType == 'add_rental'){
					let village = this.villageList[index];
					if(village.check_status == 0){
						uni.showToast({title:'审核中的小区不可发布房源',icon:'none'});
						return false;
					}
					uni.$emit("chooseVillage",village);
					uni.navigateBack({delta:1});
					return false;
				}
				
				if(villageList[index].apply_status == 1){
					uni.showToast({
						title:"申请中的小区不可点击",
						icon: 'none'
					})
					return false;
				}
				villageList[index].checked = villageList[index].checked ?!villageList[index].checked:true;
				this.villageList = villageList;
				this.$forceUpdate()
			},
			//确定选中
			applyVillages(){
				let villageList = this.villageList;
				let chooseList = [];
				let village_ids = [];
				for(let i=0;i<villageList.length;i++){
					if(villageList[i].checked){
						chooseList.push(villageList[i]);
						village_ids.push(villageList[i].id);
					}
				}
				if(chooseList.length<=0){
					uni.showToast({
						title:"请选择要加的小区",
						icon:'none'
					})
					return false;
				}
				if(this.type != ''){
					core.post({url:'/api/xiluhouse.broker/apply_village',data:{village_id:village_ids.join(',')},success:(ret)=>{
						uni.showToast({
							title:ret.msg,
							icon:'none',
							success:function(){
								uni.navigateBack({})
							}
						})
					}});
				}else{
					uni.$emit("updateVillage",chooseList);
					uni.navigateBack({delta:1});
				}
				
			},
			
			
			//上传图片
			upload() {
				let that = this;
				let img = that.formData.images
				let len = img.length
				uni.chooseImage({
					count: 10 - len,
					success: res => {
						let files = res.tempFiles;
						files.map(item => {
							core.uploadFile({
								filePath: item.path,
								success: (ret, response) => {
									img.push(ret.data.url)
									that.formData.images = img
								}
							});
						});
					}
				});
			},
			
			delImg(index) {
				let images = this.formData.images
				images.splice(index, 1)
				this.formData.images = images
			},
			
			//添加小区
			addVillage() {
				let that = this;
				let data= that.formData
				if (data.name == '') {
					uni.showToast({
						title:"请填写小区名称",
						icon: 'none'
					})
					return false
				}
				let region = that.region
				if (region.length <= 0) {
					uni.showToast({
						title:"请选择省市区",
						icon: 'none'
					})
					return false
				}
				if (data.street =='') {
					uni.showToast({
						title:"请选择街道",
						icon: 'none'
					})
					return false
				}
				if (data.addr == '') {
					uni.showToast({
						title:"请填写小区详细地址",
						icon: 'none'
					});
					return false;
				}
				if (data.images.length > 0) {
					data.images = data.images.join(",");
				}
				data.prov = region[0].name;
				data.city = region[1].name;
				data.region = region[2].name;
				core.post({
					url: 'api/xiluhouse.broker/add_village',
					data: data,
					success: ret => {
						uni.showToast({
							title: ret.msg,
							icon: 'none'
						})
						that.addPopShow = false;
						that.mescroll.resetUpScroll();
					}
				});
			},
			
			// 获取选择的地区
			handleGetRegion(region) {
				this.region = region
				this.get_street(region[2].name)
			},
			//选择街道
			strChange(e) {
				let index = e.detail.value
				let street = this.street
				this.formData.street = street[index].name
			},
			//获取街道
			get_street(name) {
				core.get({
					url: 'api/xiluhouse.universal/street_data',
					data: {
						region: name
					},
					success: ret => {
						console.log(ret.data)
						this.street = ret.data
					}
				});
			},
		},
		
		

	}
</script>

<style lang="less" scoped>
	.page-head {
		padding: 30rpx 30rpx 0;
		background-color: #fff;

		.search_box {
			padding: 0 30rpx;
			height: 72rpx;
			background: #F7F9FC;
			border-radius: 36rpx;

			.search {
				width: 24rpx;
				height: 24rpx;
				margin-right: 12rpx;
			}
		}
	}

	.container {
		padding-top: 100rpx;
	}

	.icon-check {
		display: block;
		width: 45rpx;
		height: 45rpx;
	}

	.select-box {
		padding: 0 30rpx;
	}

	.selected-box {
		padding: 30rpx 30rpx 10rpx;
		background: #F7F9FC;

		.title {
			margin: 0 0 10rpx;
			font-size: 30rpx;
			color: #898989;
			line-height: 34rpx;
		}
	}

	.page-foot {
		.foot-wrap {
			padding: 10rpx 60rpx;

			.foot-btn1 {
				margin: 0 20rpx;
				width: 300rpx;
				height: 80rpx;
				border-radius: 40rpx;
				border: 1px solid var(--normal);
				font-size: 30rpx;
				color: var(--normal);
				line-height: 80rpx;
				text-align: center;
			}

			.foot-btn2 {
				margin: 0 20rpx;
				width: 300rpx;
				height: 80rpx;
				border-radius: 40rpx;
				background: var(--normal);
				font-size: 30rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				text-align: center;
			}
		}
	}

	.add-pop {
		padding: 40rpx 40rpx 50rpx;
		width: 650rpx;
		height: 80vh;
		background: #FFFFFF;
		border-radius: 20rpx;
		overflow-y: scroll;
		.foot-btn1 {
			width: 230rpx;
			height: 80rpx;
			border-radius: 40rpx;
			border: 1px solid #CCCCCC;
			font-size: 30rpx;
			color: #aaa;
			line-height: 80rpx;
			text-align: center;
		}
		
		.foot-btn2 {
			width: 230rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: var(--normal);
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
		}
	}

	.upload {

		.item {
			position: relative;
			margin: 0 30rpx 30rpx 0;
			width: 200rpx;
			height: 156rpx;
			border-radius: 10rpx;
			overflow: hidden;
		}

		.item:nth-of-type(2n) {
			margin: 0 0 30rpx;
		}

		.item.btn {
			padding: 36rpx 0 0;
			background: #F7F9FC;
		}

		.icon {
			margin: 0 auto 7rpx;
			display: block;
			width: 45rpx;
			height: 45rpx;
		}

		.img {
			display: block;
			width: 200rpx;
			height: 156rpx;
		}

		.icon-clear {
			position: absolute;
			right: 13rpx;
			top: 13rpx;
			display: block;
			width: 30rpx;
			height: 30rpx;
			z-index: 10;
		}
	}
</style>
